<template>
  <div id="toolEditPage">
    <a-page-header title="工具编辑" @back="goBack" />
    <a-form
      model="data"
      layout="horizontal"
      style="max-width: 600px; margin: 0 auto"
    >
      <a-form-item label="工具图标">
        <a-upload
          v-model:file-list="fileList"
          name="avatar"
          list-type="picture-card"
          :show-upload-list="false"
          @preview="handlePreview"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">上传图标</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item label="工具名称">
        <a-input v-model:value="data.name" />
      </a-form-item>
      <a-form-item label="工具描述">
        <a-textarea v-model:value="data.description" :rows="4" />
      </a-form-item>
      <a-form-item label="工具路径">
        <a-input v-model:value="data.url" />
      </a-form-item>
      <a-form-item label="请求头">
        <a-textarea v-model:value="data.requestHeader" :rows="3" />
      </a-form-item>
      <a-form-item label="请求参数">
        <a-textarea v-model:value="data.requestParams" :rows="3" />
      </a-form-item>
      <a-form-item label="响应头">
        <a-textarea v-model:value="data.responseHeader" :rows="3" />
      </a-form-item>
      <a-form-item label="工具状态">
        <a-radio-group v-model:value="data.status">
          <a-radio :value="0">关闭</a-radio>
          <a-radio :value="1">正常</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="工具标签">
        <a-select v-model:value="data.tags" mode="tags"></a-select>
      </a-form-item>
      <a-form-item layout="inline">
        <a-button
          type="primary"
          @click="onSave"
          style="display: block; margin: 0 auto"
          >保存
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { getToolVOById, toolUpdate } from "@/api/tool";
import { useRoute } from "vue-router";
import type { CascaderProps } from "ant-design-vue";
import { message } from "ant-design-vue";
import { onBeforeMount, ref } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import router from "@/router";

const route = useRoute();

const fileList = ref([]);
const loading = ref(false);
const imageUrl = ref("");

//定义数据
const data = ref({
  logo: "",
  name: "",
  description: "",
  url: "",
  tags: "",
  requestHeader: "",
  requestParams: "",
  responseHeader: "",
  status: "",
  method: "",
});

//生命周期
onBeforeMount(() => {
  //获取数据
  loadData();
});

//加载数据
const loadData = async () => {
  let param = String(route.params.id);
  if (!param) {
    message.error("参数错误");
    return;
  } else {
    getToolVOById(param)
      .then((res: any) => {
        if (res.code == 0) {
          data.value = res.data;
        }
      })
      .catch((err) => {
        message.error("系统错误，" + err.message);
      });
  }
};
//后退
const goBack = () => {
  router.back();
};

//保存编辑
const onSave = () => {
  toolUpdate(data.value)
    .then((res: any) => {
      if (res.code == 0) {
        message.success("保存成功");
        goBack();
      } else {
        message.error("保存失败，" + res.message);
      }
    })
    .catch((err) => {
      message.error("保存失败，" + err.message);
    });
};

//图片上传
const previewVisible = ref(false);
const previewImage = ref("");
const handlePreview = (file: any) => {
  previewImage.value = file.url || file.thumbUrl;
  previewVisible.value = true;
};

const options = ref<CascaderProps["options"]>([]);
</script>

<style scoped></style>
